<template>
	<view class="line" @click="emitClick"><view class="line-active" :style="{width:width}"></view></view>
</template>

<script>
import { mapState } from 'vuex';
	export default{
		props:['width'],
				computed:{
					...mapState(['themeType'])
				},
		methods:{
			emitClick(e){
				this.$emit('emitClick',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line{
		flex: 1;
		width: 100%;
		height: 2rpx;
		line-height: 2rpx;
		background-color: #3f4b57;
	}
	.line-active{
		position: relative;
		width: 70%;
		height: 2rpx;
		background-color: red;
		&::after{
			position: absolute;
			right: 0;
			top: 0;
			content:'';
			display: block;
			width: 8rpx;
			height: 8rpx;
			transform: translate(0,-50%);
			background-color: red;
			border-radius: 50%;
		}
	}
</style>
